<template>
  <div class="users">
    <div class="title" v-if="id">试题修改</div>
    <div class="title" v-else>试题录入</div>
    <div class="layout">
      <el-form
        label-width="120px"
        label="left"
        ref="dataForm"
        :model="form"
        :rules="rules"
      >
        <el-form-item label="学科：" prop="subjectID">
          <el-select v-model="form.subjectID" placeholder="请选择">
            <el-option
              v-for="(item, index) in creator"
              :key="index"
              :label="item.label"
              :value="item.value" /></el-select
        ></el-form-item>
        <el-form-item label="目录：" prop="catalogID">
          <el-select v-model="form.catalogID" placeholder="请选择">
            <el-option
              v-for="(item, index) in creator"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业：" prop="enterpriseID">
          <el-select v-model="form.enterpriseID" placeholder="请选择">
            <el-option
              v-for="(item, index) in creator"
              :key="index"
              :label="item.label"
              :value="item.value"
            >
            </el-option> </el-select
        ></el-form-item>
        <el-form-item label="城市：" prop="province"
          ><div class="select">
            <el-select
              class="select-width"
              v-model="form.province"
              placeholder="请选择"
              @change="form.city = cityList[0]"
            >
              <el-option
                v-for="(item, index) in provinceList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.city"
              class="select-width"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in cityList"
                :key="index"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select></div
        ></el-form-item>
        <el-form-item label="方向：" prop="direction">
          <el-select v-model="form.direction" placeholder="请选择">
            <el-option
              v-for="(item, index) in direction"
              :key="index"
              :label="item"
              :value="item"
            >
            </el-option></el-select
        ></el-form-item>
        <el-form-item label="题型：" prop="questionType">
          <el-radio
            v-model="form.questionType"
            v-for="(item, index) in questionType"
            :label="item.label"
            :key="index"
          ></el-radio>
        </el-form-item>
        <el-form-item label="难度：" prop="difficulty">
          <el-radio
            v-model="form.difficulty"
            :label="item.label"
            v-for="(item, index) in difficulty"
            :key="index"
          ></el-radio
        ></el-form-item>
        <el-form-item label="题干：" style="height: 250px" prop="question"
          ><quillEditor
            v-model="form.question"
            style="height: 200px"
            @blur="$refs.dataForm.validateField('question')"
          ></quillEditor
        ></el-form-item>
        <el-form-item
          label="选项："
          v-show="form.questionType !== '简答'"
        ></el-form-item>
        <el-form-item
          class="ts"
          v-for="(item, index) in form.options"
          :key="index"
          v-show="form.questionType !== '简答'"
        >
          <el-radio
            v-if="form.questionType === '单选'"
            :label="item.code"
            v-model="item.isRight"
            style="margin-right: 10px"
            @click.native.prevent="radioClick(index, item.code)"
          >
            <!-- :style="{
              'border-color: #409EFF;background: #409EFF': item.isRight
            }" --></el-radio
          ><el-checkbox
            v-else
            v-model="item.isRight"
            style="margin-right: 20px"
          ></el-checkbox
          ><el-input v-model="item.title" style="width: 240px"></el-input
          ><el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            >上传图片</el-upload
          >
          <el-button
            type="wraning"
            @click.prevent="removeDomain(item)"
            icon="el-icon-circle-close"
          ></el-button>
        </el-form-item>
        <el-form-item v-show="form.questionType !== '简答'"
          ><el-button @click="addDomain(ins[form.options.length])" class="ins"
            >+增加选项与答案</el-button
          ></el-form-item
        >
        <el-form-item label="解析视频："
          ><el-input v-model="form.videoURL"></el-input
        ></el-form-item>
        <el-form-item label="答案解析：" prop="answer" style="height: 250px"
          ><quillEditor
            v-model="form.answer"
            @blur="$refs.dataForm.validateField('answer')"
            style="height: 200px"
          ></quillEditor
        ></el-form-item>
        <el-form-item label="题目备注："
          ><el-input
            v-model="form.remarks"
            type="textarea"
            :rows="4"
            style="width: 400px"
          ></el-input
        ></el-form-item>
        <el-form-item label="试题标签：">
          <el-select v-model="form.tags" placeholder="请选择"></el-select
        ></el-form-item>
        <el-form-item v-if="id"
          ><el-button type="success" @click="onSubmit"
            >确认修改</el-button
          ></el-form-item
        >
        <el-form-item v-else
          ><el-button type="primary" @click="onSubmit"
            >确认提交</el-button
          ></el-form-item
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import {
  direction,
  difficulty,
  questionType,
  questionTypeVal,
  difficultyVal,
  questionTypeLab,
  difficultyLab
} from '@/api/hmmm/constants.js'
import { simple } from '@/api/hmmm/subjects.js'
import { list } from '@/api/hmmm/companys.js'
import { add, update, detail } from '@/api/hmmm/questions.js'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  components: { quillEditor },
  data () {
    return {
      list: [],
      id: this.$route.query.id,
      form: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '单选',
        difficulty: '简单',
        question: '',
        options: [
          { isRight: false, code: 'A', title: '', img: '' },
          { isRight: false, code: 'B', title: '', img: '' },
          { isRight: false, code: 'C', title: '', img: '' },
          { isRight: false, code: 'D', title: '', img: '' }
        ],
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      rules: {
        subjectID: [
          { required: true, message: '请选择学科', trigger: 'change' }
        ],
        catalogID: [
          { required: true, message: '请选择目录', trigger: 'change' }
        ],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
        province: [
          { required: true, message: '请选择城市', trigger: 'change' }
        ],
        direction: [
          { required: true, message: '请选择方向', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'change' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'change' }
        ],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },

      direction,
      difficulty,
      questionType,
      creator: [],
      ins: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('')
    }
  },
  computed: {
    provinceList () {
      return provinces()
    },
    cityList () {
      return citys(this.form.province)
    },
    company () {
      return this.list.map(item => ({
        label: item.company,
        value: item.company
      }))
    },
    shortName () {
      return this.list.map(item => ({
        label: item.shortName,
        value: item.shortName
      }))
    }
  },
  async created () {
    const { data } = await list({ pagesize: 10000 })
    const res = await simple()
    this.creator = res.data
    this.list = data.items
    if (this.id) {
      const { data } = await detail({ id: this.id })
      this.form = data
      this.form.difficulty = difficultyLab(this.form.difficulty)
      this.form.questionType = questionTypeLab(this.form.questionType)
    }
  },
  methods: {
    async onSubmit () {
      try {
        await this.$refs.dataForm.validate()
        this.form.questionType = questionTypeVal(this.form.questionType)
        this.form.difficulty = difficultyVal(this.form.difficulty)
        if (this.id) {
          this.form.id = +this.id
          await update(this.form)
        } else {
          for (const key in this.form) {
            if (!this.form[key]) {
              delete this.form[key]
            }
          }
          await add(this.form)
        }
        this.$refs.dataForm.resetFields()
        this.form = {
          subjectID: '',
          catalogID: '',
          enterpriseID: '',
          province: '',
          city: '',
          direction: '',
          questionType: '单选',
          difficulty: '简单',
          question: '',
          options: [
            { isRight: false, code: 'A', title: '', img: '' },
            { isRight: false, code: 'B', title: '', img: '' },
            { isRight: false, code: 'C', title: '', img: '' },
            { isRight: false, code: 'D', title: '', img: '' }
          ],
          videoURL: '',
          answer: '',
          remarks: '',
          tags: ''
        }
        this.$router.push('list')
        this.$message.success(this.form.id ? '修改试题成功' : '添加试题成功')
      } catch (error) {
        console.log(error)
      }
    },
    removeDomain (item) {
      const index = this.form.options.indexOf(item)
      if (index !== -1) {
        this.form.options.splice(index, 1)
      }
    },
    addDomain (val) {
      this.form.options.push({ isRight: false, code: val, title: '', img: '' })
    },
    radioClick (index, code) {
      this.form.options.forEach(item => (item.isRight = false))
      this.form.options[index].isRight = code
    }
  }
}
</script>

<style scoped lang="less">
.users {
  padding: 10px 20px;
  .title {
    padding: 18px 20px;
    border-bottom: 1px solid #ebeef5;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 0 0;
  }
  .layout {
    padding: 20px;
    border-radius: 0 0 5px 5px;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .el-select.el-select--medium,
    .el-input.el-input--medium {
      width: 400px;
    }
    .select {
      width: 400px;
      display: flex;
      justify-content: space-between;
      .select-width.el-select.el-select--medium {
        width: 195px;
      }
    }
    .ins {
      color: #fff;
      background-color: #fab6b6;
      border-color: #fab6b6;
    }
    .ts ::v-deep .el-form-item__content {
      display: flex;
      align-items: center;
      height: 80px;
      .el-upload.el-upload--picture-card {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        width: 100px;
        height: 60px;
        line-height: 60px;
        margin-left: 10px;
        background-color: #fff;
        &:hover {
          border-color: #409eff;
        }
      }
    }

    ::v-deep .el-form-item.ts.el-form-item--medium .el-form-item__label {
      line-height: 75px !important;
    }
    .el-button.el-button--wraning.el-button--medium {
      border: 0;
      padding: 0;
      font-size: 20px;
      align-self: start;
      transform: translate(-10px);
      border-radius: 50%;
      &:hover {
        background-color: transparent;
      }
    }
  }
}
</style>
